<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
<meta name="format-detection" content="telephone=no" />
<title></title>
<style>
/*全局*/
body{background-color:#E5E5E5;text-align:center;font-family: 'Helvetica Neue',sans-serif;overflow-x:hidden;}
body,article,section,h1,h2,hgroup,p,a,ul,li,em,div,small,span,footer,canvas,figure,figcaption,input{margin:0;padding:0;}
img{border:none;}
a{text-decoration:none;cursor:pointer;}
a.autotel{text-decoration:none;color:inherit;}
ul{list-style-type:none;}
small,small em{font-size:15px;}
.box:after { clear: both; display: block; visibility: hidden; height: 0; content: "."; }
.box { *zoom: 1; }
.inner{width:320px;margin:0 auto;}

/*手指翻页组件*/
.touchSlider{overflow:hidden;position:relative;}
.touchSlider .sld_bar{vertical-align:top;z-index:0;}
.touchSlider .sld_page{display:inline;float:left;}
.touchSlider .sld_dots{z-index:1;}
.touchSlider canvas{}
.touchSlider .inner{overflow:hidden;position:relative;z-index:0;}
.touchSlider .inner a.toucher{display:block;position:absolute;z-index:1;top:0;left:0;opacity:.5;background:red;}

/*测试模块*/
.testBox{margin:10px;text-align:left;}
.testBox h1{height:22px;line-height:22px;font-size:14px;color:#353535;padding-left:16px;background-repeat:no-repeat;}
.testBox ul{border:1px solid #bfbfbf;
	-webkit-border-radius:5px; 
	-moz-border-radius:5px; 
	border-radius:5px;
	box-shadow:1px 1px 0 #efefef, -1px -1px 0 #efefef;
	padding:9px 0 3px 2px;
	background-color:#f3f3f3;
}
.testBox li{display:inline-block;float:left;width:73px;height:90px;text-align:center;}
.testBox li a{display:block;font-size:12px;color:#bfbfbf;line-height:15px;}
.testBox figure{width:54px;height:54px;display:inline-block;float:right;margin:0 9px 2px 9px;text-align:left;}
.testBox figure img{width:44px;height:44px;margin:4px 0 0 5px;}
.testBox li span{display:inline-block;width:73px;font-size:10px;line-height:12px;}
.testBox .inner{width:292px}
.testBox canvas{float:left;display:inline-block;margin:0 2px 0 3px;}
.testBox .sld_dots{height:8px;margin:5px auto;display:inline-block;}
.testBox .sldDotWarpper{text-align:left;}
</style>
<script src="MTouchSlider.js"></script>
</head>
<body>

<article class="testBox">
	<ul class="box">
		<div class="touchSlider"  id="tb1" 
			data-dot-color="#fffffd" 
			data-auto-play="1" 
			data-min-height="180" 
			data-drag-callback="_onSliderDragEnd">
			
			<div class="inner">
				<div class="sld_bar">
					<div class="sld_page" data-rendered="1">
						<li><a href="#"><figure><img src="http://img1.cache.netease.com/game/2012/9/12/20120912145207cea28.jpg" /></figure><br/>大清花</a></li>
						<li><a href="#"><figure><img src="http://img1.cache.netease.com/game/2012/9/12/20120912145207cea28.jpg" /></figure><br/>大清花</a></li>
						<li><a href="#"><figure><img src="http://img1.cache.netease.com/game/2012/9/12/20120912145207cea28.jpg" /></figure><br/>大清花</a></li>
						<li><a href="#"><figure><img src="http://img1.cache.netease.com/game/2012/9/12/20120912145207cea28.jpg" /></figure><br/>大清花</a></li>
						
						<li><a href="#"><figure><img src="http://img1.cache.netease.com/game/2012/9/12/20120912145207cea28.jpg" /></figure><br/>大清花</a></li>
						<li><a href="#"><figure><img src="http://img1.cache.netease.com/game/2012/9/12/20120912145207cea28.jpg" /></figure><br/>大清花</a></li>
						<li><a href="#"><figure><img src="http://img1.cache.netease.com/game/2012/9/12/20120912145207cea28.jpg" /></figure><br/>大清花</a></li>
						<li><a href="#"><figure><img src="http://img1.cache.netease.com/game/2012/9/12/20120912145207cea28.jpg" /></figure><br/>大清花</a></li>
					</div>
					<div class="sld_page">
						<li><a href="#"><figure><img src="http://img1.cache.netease.com/game/2012/9/12/20120912145207cea28.jpg" /></figure><br/>大清花</a></li>
						<li><a href="#"><figure><img src="http://img1.cache.netease.com/game/2012/9/12/20120912145207cea28.jpg" /></figure><br/>大清花</a></li>
						<li><a href="#"><figure><img src="http://img1.cache.netease.com/game/2012/9/12/20120912145207cea28.jpg" /></figure><br/>大清花</a></li>
						<li><a href="#"><figure><img src="http://img1.cache.netease.com/game/2012/9/12/20120912145207cea28.jpg" /></figure><br/>大清花</a></li>
						
						<li><a href="#"><figure><img src="http://img1.cache.netease.com/game/2012/9/12/20120912145207cea28.jpg" /></figure><br/>大清花</a></li>
						<li><a href="#"><figure><img src="http://img1.cache.netease.com/game/2012/9/12/20120912145207cea28.jpg" /></figure><br/>大清花</a></li>
						<li><a href="#"><figure><img src="http://img1.cache.netease.com/game/2012/9/12/20120912145207cea28.jpg" /></figure><br/>大清花</a></li>
						<li><a href="#"><figure><img src="http://img1.cache.netease.com/game/2012/9/12/20120912145207cea28.jpg" /></figure><br/>大清花</a></li>
					</div>
					<div class="sld_page">
						<li><a href="#"><figure><img src="http://img1.cache.netease.com/game/2012/9/12/20120912145207cea28.jpg" /></figure><br/>大清花</a></li>
						<li><a href="#"><figure><img src="http://img1.cache.netease.com/game/2012/9/12/20120912145207cea28.jpg" /></figure><br/>大清花</a></li>
						<li><a href="#"><figure><img src="http://img1.cache.netease.com/game/2012/9/12/20120912145207cea28.jpg" /></figure><br/>大清花</a></li>
						<li style="opacity:0;"><a href="javascript:void(0)"><figure></figure></a></li>
						
						<li style="opacity:0;"><a href="javascript:void(0)"><figure></figure></a></li>
						<li style="opacity:0;"><a href="javascript:void(0)"><figure></figure></a></li>
						<li style="opacity:0;"><a href="javascript:void(0)"><figure></figure></a></li>
						<li style="opacity:0;"><a href="javascript:void(0)"><figure></figure></a></li>
					</div>
				</div>
			</div>
			<div class="sldDotWarpper inner"><div class="sld_dots box" data-relative-layout="1"></div></div>
		</div>
	</ul>
</article>

<script>
var ts = new MTouchSlider( document.querySelector('#tb1'), {
	pageCls: '.sld_page',
	barCls: '.sld_bar',
	dotsCls: '.sld_dots'
});
</script>
</body>
</html>
